<div class="grid">
    <div class="col-12">
        <div class="card">
            <div class="card-w-title">
                <h5 style="font-weight: 900">配额管理</h5>
            </div>
            <p-toolbar>
                <div
                    class="p-toolbar-group-left flex flex-wrap formgroup-inline"
                >
                    <div class="field">
                        <label for="searchApplicantName" class="p-sr-only"
                            >请输入所属用户</label
                        >
                        <input
                            id="searchApplicantName"
                            [(ngModel)]="searchForm.name"
                            type="text"
                            pInputText
                            placeholder="请输入所属用户"
                            pTooltip="请输入所属用户"
                        />
                    </div>
                </div>

                <div class="p-toolbar-group-right formgroup-inline">
                    <div class="field">
                        <p-button label="查询" icon="pi pi-search" (click)="search()"></p-button>
                        <!--button pButton pRipple type="button" label="查询" icon="pi pi-check"></button-->
                    </div>
                    <div class="field">
                        <button
                            pButton
                            pRipple
                            type="button"
                            label="重置"
                            class="p-button-secondary"
                            (click)="reset()"
                        ></button>
                    </div>
                </div>
            </p-toolbar>
        </div>
    </div>
    <div class="col-12">
        <div class="card" style="min-height:625px">
            <p-table
                #dt1
                [value]="quotaList"
                dataKey="quota"
                [rowHover]="true"
                [rows]="10"
                [paginator]="true"
                [rowsPerPageOptions]="[10, 25, 50]"
                scrollDirection="both"
                [scrollable]="true"
                styleClass="p-datatable-striped"
                responsiveLayout="scroll"
            >
                <ng-template pTemplate="header">
                    <tr>
                        <th width="15%" pFrozenColumn>
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                用户 ID
                            </div>
                        </th>
                        <th width="15%">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                用户名称
                            </div>
                        </th>
                        <th width="10%">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                            第一批用水计划(万m³)
                            </div>
                        </th>
                        <th width="10%">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                            第二批用水计划(万m³)
                            </div>
                        </th>
                        <th width="10%">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                            总用水计划量(万m³)
                            </div>
                        </th>
                        <th width="10%">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                            许可用水量(万m³)
                            </div>
                        </th>
                        <th width="10%">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                            实际用水量(万m³)
                            </div>
                        </th>
                        <th width="20%" pFrozenColumn alignFrozen="right">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                操作
                            </div>
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-item>
                    <tr>
                        <td width="15%" pFrozenColumn>
                            {{ item.applicantId }}
                        </td>
                        <td width="15%">
                            {{ item.applicantName }}
                        </td>
                        <td width="10%">
                            {{ item.firstPlanVolume }}
                        </td>
                        <td width="10%">
                            {{ item.secondPlanVolume }}
                        </td>
                        <td width="10%">
                            {{ item.totalPlanVolume }}
                        </td>
                        <td width="10%">
                            {{ item.licenseVolume }}
                        </td>
                        <td width="10%">
                            {{ item.totalUsedVolume }}
                        </td>
                        <td
                            width="20%"
                            style="text-align: center"
                            pFrozenColumn
                            alignFrozen="right"
                        >
                            <button
                                pButton
                                pRipple
                                type="button"
                                label="配额管理"
                                (click)="openDialog1(item)"
                            ></button>
                            <button
                                pButton
                                pRipple
                                type="button"
                                label="往年计划"
                                class="p-button-secondary"
                                style="margin-left: 20px"
                                (click)="openDialog2(item)"
                            ></button>
                        </td>
                    </tr>
                </ng-template>
                <ng-template pTemplate="emptymessage">
                    <tr>
                        <td colspan="7">没有找到配额信息</td>
                    </tr>
                </ng-template>
                <ng-template pTemplate="loadingbody">
                    <tr>
                        <td colspan="7">正在加载配额信息，请稍等</td>
                    </tr>
                </ng-template>
            </p-table>
        </div>
    </div>
</div>
<p-dialog
    header='配额管理'
    [(visible)]="display"
    [modal]="true"
    [style]="{ width: '600px' }"
    [draggable]="false"
    [resizable]="false"
>
    <div class="field grid">
        <label for="email" class="col-fixed w-9rem">用户 ID</label>
        <div class="col">
            {{currentItem.applicantId}}
        </div>
    </div>
    <div class="field grid">
        <label for="email" class="col-fixed w-9rem">用户名称</label>
        <div class="col">
            {{ currentItem.applicantName }}
        </div>
    </div>
    <div class="field grid">
        <label for="email" class="col-fixed w-9rem">第一批计划水量(万m³)</label>
        <div class="col">
            <input
                type="text"          
                pInputText
                label="email"
                class="ng-dirty ng-invalid mr-2"
                [(ngModel)]="editForm.firstPlanVolume"
            />
        </div>
    </div>
    <div class="field grid">
        <label for="email" class="col-fixed w-9rem">第二批计划水量(万m³)</label>
        <div class="col">
            <input
                type="text"
                
                pInputText
                label="email"
                class="ng-dirty ng-invalid mr-2"
                [(ngModel)]="editForm.secondPlanVolume"
            />
        </div>
    </div>
    <ng-template pTemplate="footer">
        <p-button
            (click)="edit()"
            label="确认"
            styleClass="p-button-text"
        ></p-button>
        <p-button
            (click)="display = false"
            label="取消"
            styleClass="p-button-text"
        ></p-button>
    </ng-template>
</p-dialog>
<p-dialog
    header='往年计划'
    [(visible)]="display2"
    [modal]="true"
    [style]="{ width: '600px' }"
    [draggable]="false"
    [resizable]="false"
>
    <div class="field grid">
        <label for="email" class="col-fixed w-9rem">用户 ID</label>
        <div class="col">
            {{currentItem.applicantId}}
        </div>
    </div>
    <div class="field grid">
        <label for="email" class="col-fixed w-9rem">用户名称</label>
        <div class="col">
            {{ currentItem.applicantName }}
        </div>
    </div>
    <div class="field grid">
        <label for="email" class="col-fixed w-9rem">{{year-2}}年第一批计划水量(万m³)</label>
        <div class="col">
            {{ planValue.downYear.firstPlanVolume }}
        </div>
    </div>
    <div class="field grid">
        <label for="email" class="col-fixed w-9rem">{{year-2}}年第二批计划水量(万m³)</label>
        <div class="col">
            {{ planValue.downYear.secondPlanVolume }}
        </div>
    </div>
    <div class="field grid">
        <label for="email" class="col-fixed w-9rem">{{year-2}}年总计划水量(万m³)</label>
        <div class="col">
            {{ planValue.downYear.totalPlanVolume }}
        </div>
    </div>
    <div class="field grid">
        <label for="email" class="col-fixed w-9rem">{{year-1}}年第一批计划水量(万m³)</label>
        <div class="col">
            {{ planValue.lastYear.firstPlanVolume }}
        </div>
    </div>
    <div class="field grid">
        <label for="email" class="col-fixed w-9rem">{{year-1}}年第二批计划水量(万m³)</label>
        <div class="col">
            {{ planValue.lastYear.secondPlanVolume }}
        </div>
    </div>
    <div class="field grid">
        <label for="email" class="col-fixed w-9rem">{{year-1}}年总计划水量(万m³)</label>
        <div class="col">
            {{ planValue.lastYear.totalPlanVolume }}
        </div>
    </div>
    <div class="field grid">
        <label for="email" class="col-fixed w-9rem">{{year}}年第一批计划水量(万m³)</label>
        <div class="col">
            {{ planValue.currentYear.firstPlanVolume }}
        </div>
    </div>
    <div class="field grid">
        <label for="email" class="col-fixed w-9rem">{{year}}年第二批计划水量(万m³)</label>
        <div class="col">
            {{ planValue.currentYear.secondPlanVolume }}
        </div>
    </div>
    <div class="field grid">
        <label for="email" class="col-fixed w-9rem">{{year}}年总计划水量(万m³)</label>
        <div class="col">
            {{ planValue.currentYear.totalPlanVolume }}
        </div>
    </div>
    <ng-template pTemplate="footer">
        <p-button
            (click)="display2 = false"
            label="确认"
            styleClass="p-button-text"
        ></p-button>
        <p-button
            (click)="display2 = false"
            label="取消"
            styleClass="p-button-text"
        ></p-button>
    </ng-template>
</p-dialog>
<p-toast></p-toast>